<template>
  <basic-dialog :visible="networkDialog"
                minWidth="650px"
                title="网络诊断"
                isShowClose
                @close="hideDialog"
                :isShowInnerLoading="loading"
  >
    <div>
      <q-form greedy @submit="submit" ref="submitQuality" class="margin-20">
        <div class="flex justify-between">
          <div>
            <div class="flex">
              <yz-input v-model="queryParams.ip"
                        class="margin-r-10"
                        inputType="input"
                        style="width: 260px"
                        :rules="[0]"
                        :hint-rule="[
                       val => val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val) || '请输入合法ip地址']"
                        title="IP地址"
              />
              <yz-input v-model="queryParams.port"
                        inputType="input"
                        :hint-rule="queryParams.port ? [ val => val && val.length > 0 &&  /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(val) || '请输入合法端口0~65535'] :  [() => true]"
                        title="端口号"
              />
            </div>
            <yz-input v-model="queryParams.num"
                      inputType="input"
                      :rules="[0]"
                      style="width: 258px"
                      :hint-rule="[ val => val && /\b[1-9]\b/.test(val) || '请输入大于1小于10数字']"
                      title="ping次数"
            />
          </div>
          <q-btn class="btn" unelevated type="submit" color="primary" label="测试" />
        </div>
      </q-form>
      <div class="margin-20 box scrollbar" v-html="data">

      </div>
      <div class="margin-l-20 margin-r-20 margin-b-20">
        <div>测试结果说明</div>
        <div>
          <div>IP PING通: 显示返回用时</div>
          <div>仅测试IP PING通: 显示字段: 64 bytes from 'xx.xx.xx.xx': icmp_sep=1 ttl=64 time=xx ms。xx为返回用时</div>
          <div>测试IP+端口 PING通: 显示字段: connected to 'xx.xx.xx.xx'</div>
          <div>其余结果均为未PING通</div>
        </div>
      </div>
    </div>
  </basic-dialog>
</template>

<script>
import { boxNetFix } from '../../../../../boot/miot/plc-list'

export default {
  name: 'index',
  props: {
    ucloudBoxId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      networkDialog: false,
      loading: true,
      data: '',
      queryParams: {
        ip: '',
        num: '',
        port: ''
      }
    }
  },
  methods: {
    // 关闭弹框
    showDialog () {
      Object.assign(this.queryParams, this.$options.data.call(this).queryParams)
      this.data = ''
      this.networkDialog = true
      this.loading = false
    },
    // 关闭弹框
    hideDialog () {
      this.networkDialog = false
    },
    submit () {
      const params = {
        ip: this.queryParams.ip,
        port: this.queryParams.port,
        num: this.queryParams.num,
        ucloudBoxId: this.ucloudBoxId
      }
      this.data = ''
      this.loading = true
      boxNetFix(params).then(res => {
        this.data = res.data.replace(/(\r\n|\n|\r)/gm, ' <br /> ')
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped lang="stylus">
.btn{
  padding: 0;
  min-width: 96px;
  min-height: 32px;
  line-height: 1;
  font-size: 14px;
  height: 32px;
}

.box{
  border-radius: 5px;
  border: 1px solid #c7c7c7;
  max-height: 200px;
  height: 200px;
  overflow-y: auto;
}
</style>
